<template>
	<view class="w100p pr common_wrap">
		<CommonHeader :title="lang !== 'ru' ? '详情' : 'Подробнее'" color="#fff" @goback="goback"
			backgroundColor="rgba(0,0,0,1)" :is-right="true">
			<view slot="right" @click="shareBtn">
				<uni-icons type="redo-filled" size="44rpx" color="#fff"></uni-icons>
			</view>
		</CommonHeader>

		<view class="w100p flex-item oh">
			<scroll-view scroll-y class="w100p scroll-Y">
				<view class="w100p swiper_video" :style="{ top: +statusBarHeight + 44 + 'px' }">
					<swiper class="w100p swiper" :disable-touch="stopTouchMove" circular :indicator-dots="showDots"
						indicator-color="#9B969A" indicator-active-color="#fff" :circular="true">
						<swiper-item v-if="!!product.video">
							<view class="pr video_wrap">
								<video id="myVideo" class="w100p  palyxxx" :src="product.video" :show-center-play-btn="true"
									object-fit="cover" play-btn-position="center" :controls="true" :autoplay="isAdroid ? true : false" muted
									:poster="currntMainPic">
								</video>
								<view class="video-wrapxx">
									<image :src="currntMainPic" mode="aspectFill"></image>
								</view>
								<cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(product.video)">
									<view class="icon_wrap">
										<u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
									</view>
								</cover-view>
							</view>
						</swiper-item>
						<swiper-item v-for="(item, index) in list" :key="index">
							<image class="w100p img" :src="item" mode="aspectFill" @click="amplifyImg(item)"></image>
						</swiper-item>
					</swiper>
					<cover-view v-show="isShow" class="pa history_wrap">
						<u-notice-bar class="w100p" mode="vertical" :is-circular="false" :volume-icon="false" type="none"
							:list="historyList" font-size="22" duration="5000"></u-notice-bar>
					</cover-view>
				</view>
				<view :style="{ marginTop: +statusBarHeight + 44 + 200 + 'px' }"></view>
				<view class="w100p pr common_content">

					<tipSl :text="$t('【重要提示】购买0元商品享受福利,商家目前已售{num}件，达到一定数量后，商家免费邮寄小样，具体数量请咨询商家。', {num: gglist[skuShow].sales || 0})" style="margin: 0;background-color: transparent;padding-left:0;padding-right: 0;" v-if="lang == 'ru' && gglist[skuShow]['sell_price'] == 0"></tipSl>

					<view class="w100p shop_card">
						<view class="w100p flex-column card_wrap">
							<view class="w100p card_top">
								<view class="flex-item top_price oh" v-if="!isSellEmpty">
									<text class="flex-none unit">{{ product.currency || '￥' }}</text>
									<text class="flex-item num" v-if="product.pf_price == product.sell_price">{{
										product.pf_price || 0 }}</text>
									<text class="flex-item num" v-else>{{ product.pf_price || 0 }}～{{
										product.sell_price || 0 }}</text>
								</view>
								<view class="flex-item top_price oh" v-else>
									<text class="flex-item num">{{ $t("已售罄") }}</text>
								</view>
								<view class="flex-none pr top_right">
									<view class="pa right_img">
										<view class="img_wrap" v-for="(item, index) in avatarList" :key="index">
											<image class="img" :src=" getImageUrl(item) || '/static/default.png'" ></image>
										</view>
									</view>
									<view>
										{{ historyNum }}{{ lang !== 'ru' ? "人" : "чел" }}{{ historyNum > 100 ? "+" : "" }}
									</view>
								</view>
							</view>
							<view class="w100p flex-box tip_wrap">
								<view class="flex-none tip tip-1" v-if="product.gid && product.gid.indexOf('4') > -1">
									{{ lang !== 'ru' ? "促销活动" : "СКИДКА" }} {{ lang !== 'ru' ? `折扣${product.huodong || 0}%` : `Акция
									Скидка${product.huodong || 0}%` }}
								</view>
								<view class="flex-none tip tip-2">{{ product.is_yf != 1 ? $t("不含运费") : $t("含运费") }}
								</view>
							</view>

							<view class="w100p flex-box flex-start" style="justify-content: flex-start;" v-if="lang=='ru' && suggestion_config == 1 && product.sell_price" >
								<view class="price-jian">
									<text v-if="product.sell_price">{{product.currency || '￥'}}</text>{{ getPriceString() }}
								</view>
								<view class="plat-jianyi" v-if="lang=='zh'">
									<text>
										{{ $t('平台建议价格') }}
									</text>
								</view>
								<view class="plat-jianyi" v-if="lang=='ru'" style="line-height: 1.1em;">
									<text>
										{{ $t('平台建议价格') }}
									</text>
								</view>
							</view>

							<view class="w100p pr card_title" :class="{ no_padding: !isEllipsis }">
								<text class="w100p title_wrap" :class="{ ellipsis: isEllipsis }" ref="nameRef">{{ product[plang('name')]
									}}</text>
								<view class="pa more" v-show="isEllipsis" @click="seeMore">
									{{ lang !== 'ru' ? "展开" : "ещё" }} <u-icon name="arrow-down-fill" color="#278AFF" size="16"></u-icon>
								</view>
							</view>
							<view :class="['w100p', 'flex-box', 'list_wrap', lang == 'ru' ? 'ru' : '']">
								<view class="flex-box list_item">
									<image class="flex-none img" src="@/static/detail/card_01.png" mode="widthFix">
									</image>
									<view class="flex-item oh">
										<view class="w100p name">{{ lang !== 'ru' ? "起批数量" : "Мин. кол. оптом" }}</view>
										<view class="w100p flex-box flex-end">
											<view class="flex-item num">{{ product.qpsl > 100 ? '100+' : product.qpsl }}
											</view>
											<view class="flex-none unit">{{ product[plang('sldw')] }}</view>
										</view>
									</view>
								</view>
								<view class="flex-box list_item">
									<image class="flex-none img" src="@/static/detail/card_02.png" mode="widthFix">
									</image>
									<view class="flex-item oh">
										<view class="w100p name">{{ lang !== 'ru' ? "起卖数量" : "Мин. кол." }}</view>
										<view class="w100p flex-box flex-end">
											<view class="flex-item num">
												{{ product.limit_start > 100 ? '100+' : product.limit_start }}
											</view>
											<view class="flex-none unit">{{ product[plang('sldw')] }}</view>
										</view>
									</view>
								</view>
								<view class="flex-box list_item" v-if="lang == 'zh'">
									<image class="flex-none img" src="@/static/detail/card_03.png" mode="widthFix">
									</image>
									<view class="flex-item oh">
										<view class="w100p name">{{ lang !== 'ru' ? "好评率" : "Рейтинг" }}</view>
										<view class="w100p flex-box flex-end">
											<view class="flex-item num">{{ product.hpl }}</view>
											<view class="flex-none unit">%</view>
										</view>
									</view>
								</view>
								<view class="flex-box list_item">
									<image class="flex-none img" src="@/static/detail/card_04.png" mode="widthFix">
									</image>
									<view class="flex-item oh">
										<view class="w100p name">{{ lang !== 'ru' ? "收藏商品" : "Избранное" }}</view>
										<view class="w100p flex-box flex-end">
											<view class="flex-item num">
												{{ fa_buscount > 100 ? '100+' : fa_buscount }}
											</view>
											<view class="flex-none unit">{{ lang !== 'ru' ? "人" : "люди" }}</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<cover-view class="pa swiper_wrap"></cover-view>
				</view>
				<view class="w100p pr white_bg details_wrap">
					<view class="w100p common_content">
						<view class="w100p flex-box pr merchant_detail" @click="goShop">
							<view class="pr merchant_header">
								<view class="header_img">
									<image class="img" :src="business.logo || '/static/default.png'" mode="aspectFill"
										@error="errorDefaul"></image>
								</view>
								<view class="header_icon">
									<image class="img" :src="createNational(business.country).imgurl" mode="aspectFill" >
									</image>
								</view>
							</view>
							<view class="flex-item oh name_wrap">
								<view class="pr shop_name">
									{{ business[plang('name')] || $t("暂无名称") }}
								</view>
								<view class="w100p star_wrap">
									<u-rate :count="5" :current="business.comment_score" inactive-icon="star-fill"
										inactive-color="#f5f5f5" active-color="#FFE05F" :disabled="true"></u-rate>
								</view>
							</view>
							<image class="pa vip_img" :src="getVipImg(business.isvip)" mode="widthFix"></image>
						</view>
					</view>
					<template v-if="!!current3D">
						<view class="w100p big_title">
							{{ lang !== 'ru' ? "商品3D展示" : "3D-показы товаров" }}
						</view>
						<scroll-view scroll-x class="scrolxxx-wwww">
							<view class="w100p scrolxxx">
								<image class="goback_img" :src="item" mode="aspectFill" @click="onGo3D(item)"
									v-for="(item, index) in vrImglists" :key="index"></image>
							</view>
						</scroll-view>
					</template>
					<view class="w100p common_content common_content1">
						<view class="w100p flex-box details_tab" :class="{ 'con_r': tab === 2 }">
							<view class="flex-item pr item-1" @click="changeTab(1)">
								{{ lang !== 'ru' ? "产品详情" : "О товаре" }}
							</view>
							<view class="flex-item pr item-2" @click="changeTab(2)">
								{{ lang !== 'ru' ? "用户评价" : "Оценки" }}
							</view>
						</view>
						<template v-if="tab === 1">
							<view class="w100p flex-column details_con">
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("品名") }}
									</view>
									<view class="flex-item con">
										{{ product[plang('name')] || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("品牌1") }}
									</view>
									<view class="flex-item con">
										{{ product[plang('brand')] || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("数量单位1") }}
									</view>
									<view class="flex-item con">
										{{ product[plang('sldw')] || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("单品重量") }}
									</view>
									<view class="flex-item con">
										{{ product.weight || "-" }}kg
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("单品密度") }}
									</view>
									<view class="flex-item con">
										{{ product.midu || "-" }}kg/m³
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("单品体积1") }}
									</view>
									<view class="flex-item con">
										{{ product.volume || "-" }} m³
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("商品颜色") }}
									</view>
									<view class="flex-item con">
										{{ product[plang('pro_color')] || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("货物类型1") }}
									</view>
									<view class="flex-item con">
										{{ product[plang('hwlx')] || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list" v-for="(item, index) in guigedata" :key="index">
									<view class="flex-none name">
										{{ item.name }}
									</view>
									<view class="flex-item oh con">
										{{ item.value }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("起卖数量") }}
									</view>
									<view class="flex-item con">
										{{ product.limit_start || "-" }}
									</view>
								</view>
								<view class="w100p inline-flex list">
									<view class="flex-none name">
										{{ $t("起批数量1") }}
									</view>
									<view class="flex-item con">
										{{ product.qpsl || "-" }}
									</view>
								</view>
								<!-- 主体规格 -->
								<view class="w100p inline-flex list" v-for="(item, index) in paramsList" :key="index">
									<view class="flex-none name">
										{{ item.name }}
									</view>
									<view class="flex-item con">
										{{ item.value || "-" }}
									</view>
								</view>
							</view>

							<!-- 规格属性 -->

							<view class="attr-lists">
								<view class="attr"></view>
							</view>
						</template>
						<template v-if="tab === 2">
							<view class="w100p flex-column details_con">
								<view class="w100p flex-box evaluate_nav">
									<view class="img_wrap pr" @click="changeEva(1)">
										<view class="pa img_text" :class="{ 'active': evaluateType === 1 }">
											{{ $t("好评") }}
										</view>
										<image class="nav_img" src="@/static/detail/evaluate_01.png" mode="widthFix"
											v-if="evaluateType !== 1"></image>
										<image class="nav_img" src="@/static/detail/evaluate_01h.png" mode="widthFix" v-else></image>
									</view>
									<view class="img_wrap pr" @click="changeEva(2)">
										<view class="pa img_text" :class="{ 'active': evaluateType === 2 }">
											{{ $t("不错") }}
										</view>
										<image class="nav_img" src="@/static/detail/evaluate_02.png" mode="widthFix"
											v-if="evaluateType !== 2"></image>
										<image class="nav_img" src="@/static/detail/evaluate_02h.png" mode="widthFix" v-else></image>
									</view>
									<view class="img_wrap pr" @click="changeEva(3)">
										<view class="pa img_text" :class="{ 'active': evaluateType === 3 }">
											{{ $t("差评") }}
										</view>
										<image class="nav_img" src="@/static/detail/evaluate_03.png" mode="widthFix"
											v-if="evaluateType !== 3"></image>
										<image class="nav_img" src="@/static/detail/evaluate_03h.png" mode="widthFix" v-else></image>
									</view>
								</view>
								<scroll-view class="w100p list_wrap" scroll-y="true" @scrolltolower="lower" @touchmove.stop>
									<view class="w100p flex-column pr list_item" v-for="item in commentlist" :key="item.id">
										<u-icon class="pa more" name="more-dot-fill" color="#333" size="48"
											@click="reportShow = true"></u-icon>
										<view class="w100p flex-box item_top">
											<view class="flex-none oh top_img">
												<image class="img" :src="item.append_content_pic" mode="aspectFill">
												</image>
											</view>
											<view class="flex-item oh top_con">
												<view class="w100p name">
													{{ item.nickname || "" }}
												</view>
												<view class="w100p time">
													{{ item.createtime || "" }}
												</view>
											</view>
										</view>
										<view class="w100p star_wrap">
											<u-rate :count="5" :current="item.score || 0" inactive-icon="star-fill" inactive-color="#f5f5f5"
												active-color="#FFE05F" :disabled="true"></u-rate>
										</view>
										<view class="w100p textarea">
											{{ item.content || "" }}
										</view>
										<view class="w100p flex-box reply_wrap">
											<view class="flex-none title">
												{{ lang !== 'ru' ? "商家回复" : "Ответ продавца" }}
											</view>
											<view class="w100p flex-item oh text">
												{{ item.reply_content }}
											</view>

										</view>
									</view>
								</scroll-view>
							</view>
							<view class="w100p details_bottom"></view>
						</template>
					</view>

					<view class="w100p common_content" v-if="tab === 1">
						<view class="w100p shop_introduce">
							<view class="title">{{ $t('商品介绍') }}</view>
							<u-parse :html="product[plang('detail')]"></u-parse>
						</view>
						<view class="w100p shop_introduce">
							<view class="w100p" v-if="product[plang('xq_pics')]">
								<view class="full_img oh" v-for="(item, index) in product[plang('xq_pics')].split(',')" :key="index">
									<image class="w100p" :src="item" mode="widthFix" @click="amplifyImg(item)"></image>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="w100p tc mb-20">
					{{ $t("没有更多了") }}
				</view>
			</scroll-view>
		</view>

		<view class="w100p flex-none shop_bottom" :style="{ 'paddingBottom': statusbottom + 'px' }"
			v-if="this.product.status !== 0">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="shopLeftClick"
				@buttonClick="shopRightClick" />
		</view>

		<view class="explain_wrap" v-if="closeVideo && selfVideo" @click="plays(selfVideo)" :style="[getVideoTop()]">
			<video id="jjVideo" class="w100p video_wrap" :src="selfVideo" :autoplay="isAdroid ? true : false" :loop="true"
				:object-fit="objectFit" :show-center-play-btn="false" :controls="false" :muted="true"
				@fullscreenchange="jjFullscreenChange" :poster="currntMainPic">
			</video>
			<view class="w100p explain_title">{{ lang !== 'ru' ? "商品讲解" : "Описание товара" }}</view>
			<cover-view class="pa close" @click.stop="closeJJ">
				<u-icon name="close" color="#fff" size="20"></u-icon>
			</cover-view>
		</view>
		<!-- 图片放大 -->
		<uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
			<view class="w100p">
				<image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
			</view>
		</uni-popup>


		<!-- 二级分类 购物 -->
		<uni-popup ref="skuPopup" class="sku_pop" type="bottom" mask-background-color="rgba(0,0,0,0.4)"
			borderRadius="24rpx 24rpx 0 0" background-color="#fff">
			<view class="w100p" :style="{ 'padding-bottom': statusbottom + 20 + 'rpx' }">
				<view class="w100p flex-box sku_wrap" v-if="!!gglist && !!gglist[skuShow]">
					<view class="w100p pr img_wrap">
						<image class="img" :src="gglist[skuShow][plang('pic')]" mode="aspectFill"></image>
						<view class="pa tip">{{ product.is_yf != 1 ? $t("不含运费") : $t("含运费") }}</view>
					</view>
					<view class="w100p flex-column con_wrap">
						<view class="w100p name">{{ gglist[skuShow][plang('name')] }}</view>
						<view class="w100p flex-box price_wrap">
							<view class="price">
								<text class="price_unit">{{ product.currency || '￥' }}</text>
								<text>{{ ispifa != 1 ? Number(gglist[skuShow]['sell_price']) :
									Number(gglist[skuShow][plang('pf_price')]) }}</text>
							</view>
							<view class="sku_num">
								<u-number-box v-model="skuNum" :min="product.limit_start" bg-color="transparent"
									:max="currentPrice.stock"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="w100p list_wrap" scroll-y="true" @touchmove.stop>
					<view class="w100p flex-box list_item" v-for="(item, index) in gglist"
						:class="{ 'active': skuActive === item.id && item.stock != 0 }" :key="item.id"
						@click="sclectSku(item, index, item.stock)">
						<view class="flex-item oh">
							<view class="w100p name">
								{{ item[plang('name')] }}
							</view>
							<view class="con" v-if="item.stock != 0">{{ $t("库存") }}：{{ item.stock }}{{ $t("件shop") }}
							</view>
							<view class="con" v-else>{{ $t("已售罄") }}</view>
						</view>
						<view class="flex-none price">
							<text class="price_unit">{{ product.currency || '￥' }}</text>
							<text>{{ skuNum >= item.qpsl ? item.pf_price : item.sell_price }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="w100p flex-box list_btn" @click="submit">
					<text class="price_unit" v-if="rightBtnType == 1">{{ lang !== 'ru' ? "￥" : "₽" }}</text>
					<text>{{ rightBtnType == 1 ? skuPrice : $t('加入购物车') }}</text>
				</view>
			</view>
		</uni-popup>
		<!-- 支付平台 -->
		<u-popup v-model="showPayPop" mode="bottom" border-radius="24">
			<view class="platform-wrapper">
				<view class="pay-title">{{ $t("商家提供的代收付平台") }}</view>
				<scroll-view scroll-y>
					<view class="pay-wrapper">
						<view v-for="(item, index) in plateformLists" :class="['list', index == currentId && 'active']"
							:key="item.id" @click="onClickDaifu(index)">
							<view class="name">{{ item[plang('name')] }}</view>
							<view class="right-desc">
								<view class="e-du"> {{ $t("额度") }}：{{ item.edu || 0 }}{{ $t("万2") }} </view>
								<view class="fee">{{ $t("手续费") }}：{{ item.feepercent }}%</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="btn-wrapper">
					<view class="btn" @click="onConfirm">{{ $t('确认') }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 评论举报 -->
		<u-mask :show="reportShow" @click="closeReport">
			<view class="w100p full flex-box report_warp">
				<view class="w100p btn_wrap" @click.stop v-if="!isReport">
					<view class="w100p btn_item" @click.stop="isReport = true">
						{{ lang !== 'ru' ? "我要举报" : "Жалобы" }}
					</view>
					<view class="w100p btn_item" @click.stop="reportShow = false">
						{{ lang !== 'ru' ? "取消" : "Отменить" }}
					</view>
				</view>
				<view class="w100p textarea_wrap" @click.stop v-else>
					<view class="w100p flex-column content_wrap">
						<view class="w100p tc content_title">
							{{ lang !== 'ru' ? "举报内容" : "Сообщить о содержании" }}
						</view>
						<view class="w100p pr content oh">
							<text class="pa num">
								{{ reportNum }}/100
							</text>
							<u-field class="w100p full" v-model="reportText" @input="inputReport" label-width="0" placeholder="请输入"
								type="textarea" :auto-height="false" maxlength="100"></u-field>
						</view>
						<view class="w100p tc con_btn" @click="submitReport">
							{{ lang !== 'ru' ? "提交" : "представлять на рассмотрение" }}
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<u-mask :show="isShare" @click="closeShare">
			<view class="pa flex-column tc copy_wrap" @click.stop>
				<view class="w100p title">
					{{ $t("分享商品") }}
				</view>
				<view class="w100p con_wrap">
					<view class="w100p">
						{{ $t("该商品链接地址") }}
					</view>
					<view class="w100p">
						{{HTTP_SHOPPING_URL}}/ts/#/pages/jump/index?bid={{ this.id }}&type=1
					</view>
				</view>
				<view class="w100p btn_wrap" @click="copyHtml">
					{{ $t('复制链接并用浏览器打开') }}
				</view>
			</view>
		</u-mask>

		<CommonLoading :show="loading"></CommonLoading>

		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
			<view class="wrapper-video">
				<video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
					play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :poster="currntMainPic" :show-fullscreen-btn="false">
				</video>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex';
import {
	IMAGE_URL,
} from "@/config/app"
import CommonHeader from "../components/common-header.vue";
import vipImg1 from '@/static/detail/vip_1.png';
import vipImg2 from '@/static/detail/vip_2.png';
import vipImg3 from '@/static/detail/vip_3.png';
import vipImg4 from '@/static/detail/vip_4.png';

import { isLogin,createNational,memberLevel  } from '@/assets/public';
import { HTTP_SHOPPING_URL } from '@/config/app';

let scIcon = '';
let scColor = '';


export default {
	components: {
		CommonHeader
	},
	data() {
		return {
			HTTP_SHOPPING_URL,
			// 新增
			ispifa: 0, // 0 不是批发价格 1是批发价格
			ispifaNum: 0, // 批发数量
			fa_buscount: 0,
			currentPrice: {},
			selfVideo: '',
			jjVideoCtx: null,
			currntMainPic: '',
			objectFit: 'cover',
			// 结束
			id: "",
			lang: "",
			mobile: "",
			statusbottom: 0,
			product: {}, // 产品详情
			business: {}, // 商家详情
			gglist: [], // sku详情
			list: [], // 轮播图片集合
			isShow: true, // 播放按钮是否显示
			stopTouchMove: false, // 轮播是否禁止滑动
			videos: null,
			showDots: true, // 指示点是否显示
			isEllipsis: true, // 是否溢出隐藏
			closeVideo: true,
			skuShow: 0, // 展示子商品
			skuNum: 1, // 商品默认数量
			skuPrice: 0, // 选择默认商品的价格
			skuActive: 0, // 选择默认商品id
			rightBtnType: 0, // 0: 点击加入购物车   1: 点击价格
			evaluateType: 1,
			guigedata: [], // 产品规格
			detailList: [], // 产品详情
			// 底部左侧按钮
			options: [{
				icon: 'heart',
				text: '',
				color: "#262728"
			}, {
				icon: 'shop',
				text: '',
				color: "#262728"
			}, {
				icon: 'chat',
				text: '',
				color: "#262728"
			}, {
				icon: 'cart',
				text: '',
				color: "#262728",
				info: 0
			}],
			// 底部右侧按钮
			buttonGroup: [{
					text: this.$t('加入购物车'),
					backgroundColor: '#0097FF',
					color: '#fff'
				},
				{
					text: ``,
					backgroundColor: '#FF6A00',
					color: '#fff'
				}
			],
			cartnum: 0, // 购物车商品数量
			commonImg: "",
			tab: 1,
			showPayPop: false, // 展示付款框
			plateformLists: [],
			payList: [],
			currentId: 0, // 代付公司id
			loading: false,
			isRefresher: false,
			commentlist: [], // 评价列表
			pagenum: 1,
			reportShow: false,
			isReport: false,
			reportText: "",
			reportNum: 0,
			historyList: [], //浏览记录列表
			historyNum: 0,
			avatarList: [],
			isShare: false,
			activePrice: 0,
			currentInfoGuide: {},
			statusBarHeight: 0,
			isSellEmpty: false,
			currentInitCarinfo: {}, // 初始化有库存价格
			// 1688商品
			offerId: '',
			offer_price: '',
			paramsList: [],
			playVideo: '',
			vrImglists: [],
			current3D: '',
			isAdroid: false,
			sample: 0, // 0 不展示样品 1 展示样品
			suggestion_config: 0, // 0 不展示建议 1 展示

		}
	},
	watch: {
		skuNum(val) {
			this.skuMumChange(val)
		}
	},
	async onLoad(val) {
		this.lang = uni.getStorageSync("lang");
		this.mobile = uni.getStorageSync("mobile");
		this.statusbottom = uni.getStorageSync("statusbottom") || 0;
		this.statusBarHeight = uni.getStorageSync("statusBarHeight") || 0;
		this.id = val?.id || "";
		this.offerId = val.offerId || ''
		this.offer_price = val.offer_price || ''

		// 获取数据详情
		try {
			const {
				data
			} = await this.$u.api.shopping.getProduct({
				id: val.id,
				offer_price: this.offer_price,
				offerId: this.offerId,
			});
			if (!data) return;

			let xxx = await this.$u.api.shopping.getProductConfig({
				price: data.product.sell_price,
			});
			data.product.suggestion = xxx.data.suggestion;
			this.sample = xxx.data.sample;
			this.suggestion_config = xxx.data.suggestion_config;

			console.log(xxx,'xxxxx')
			this.product = data.product;

			this.selfVideo = data.product.jj_video;
			this.currntMainPic = data.product[this.plang('pic')];
			if (!!data.product?.sd_pic && !!data.product.sd_pic) {
				this.vrImglists = data.product.sd_pic.split(",");
				this.current3D = data.product['3D']
			}
			// 主体规格
			let arr = [];
			let strArr = [];
			if (data.product.params && this.lang == 'zh') {
				arr = data.product.params.split(',');
				arr.forEach((str) => {
					let ar = str.split(':')
					strArr.push({
						name: ar[0],
						value: ar[1],
					})
				})
			}
			if (data.product.params_ru && this.lang == 'ru') {
				arr = data.product.params_ru.split(',');
				arr.forEach((str) => {
					let ar = str.split(':')
					strArr.push({
						name: ar[0],
						value: ar[1],
					})
				})
			}
			this.paramsList = strArr



			this.business = data.business;
			this.gglist = [data.product, ...data.gglist];
			this.fa_buscount = data.fa_procount || 0;
			this.cartnum = data.cartnum;
			if (this.lang == 'zh') {
				this.options[3].info = data.cartnum;
			} else {
				if (this.sample == 1) {
					this.options[1].info = data.cartnum;
				} else {
					this.options[3].info = data.cartnum;
				}
			}
			scIcon = data.isfavorite ? "heart-filled" : "heart";
			scColor = data.isfavorite ? "#f00" : "#262728";

			if (!!data.product[this.plang('pics')]?.length) {
				if (this.lang == 'zh') {
					this.list = [...data.product.pics];
				} else {
					this.list = data.product.pics_ru.split(',');
				}
			} else {
				if (!!data.product && !!data.product[this.plang('pic')]) this.list.push(data.product[this.plang('pic')]);
			}

			let guiData = JSON.parse(data.product.guigedata);

			if (!!guiData?.length) {
				let arr = guiData.map(item => {
					let obj = {
						name: item.title,
						value: "",
					}
					if (!!item.items?.length) {
						let newArr = item.items.map(subItem => {
							return subItem.title;
						})
						obj.value = newArr.join(", ");
					}
					return obj;
				})
				this.guigedata = [...arr];
			}

			const systemInfo = uni.getSystemInfoSync();
			this.isAdroid = systemInfo.platform === 'android';

			this.isSellEd();
		} catch (e) { }
	},
	computed: {

	},
	created() {
		this.videos = uni.createVideoContext('myVideo');
		this.jjVideoCtx = uni.createVideoContext('jjVideo');
		this.goSettled();
		this.getCommentlist(1);
		this.getHistoryData();
	},
	mounted() {
		this.$nextTick(() => {
			let name = this.$refs.nameRef;
			let outWidth = name.$el.offsetWidth;

			let innerWidth = name.$el.children[0].offsetWidth;
			this.isEllipsis = innerWidth > outWidth;
		})
	},
	async onShow() {
		this.getUpdate(); // 更新数据
		this.isMessageGo({
			action: 'setLockOrientation',
			otherParams: {
				setLockOrientation: 'portrait-primary',
			}
		})

	},
	methods: {
		getPriceString() {
			if (!this.product.sell_price) {
				return '';
			}
			if (this.product.pf_price == this.product.sell_price) {
				return ((this.product.pf_price || 0) * this.product.suggestion * 0.1).toFixed(0);
			} else {
				return `${((this.product.pf_price || 0) * this.product.suggestion * 0.1).toFixed(0) }~${((this.product.sell_price || 0) * this.product.suggestion * 0.1).toFixed(0)}`
			}
		},
		getPriceStringSuggest() {
			if (!this.product.sell_price) {
				return '';
			}
			if (this.product.pf_price == this.product.sell_price) {
				return this.product.pf_price || 0
			} else {
				return `${(this.product.pf_price || 0).toFixed(0)}~${(this.product.sell_price || 0).toFixed(0)}`
			}
		},
		createNational,
		memberLevel,
		onGo3D() {
			uni.navigateTo({
				url: '/pages/iframe/index?id=' + this.id + '&type=2' +'&url=' + this.current3D,
			})
		},
		goShop() {
			uni.navigateTo({
				url: '/pages/details/merchantDetail?bid=' + this.business.id,
			})
		},
		// 售勤逻辑判断
		isSellEd() {
			let text = "";

			// 获取 底部栏 数据
			if (this.lang === "ru") {
				if (this.sample == 1) {
					this.options = [{
						icon: scIcon,
						text: '',
						color: scColor
					}, {
						icon: 'cart',
						text: '',
						color: "#262728",
						info: this.cartnum
					}];
				} else {
					this.options = [{
						icon: scIcon,
						text: '',
						color: scColor
					}, {
						icon: 'shop',
						text: '',
						color: "#262728"
					}, {
						icon: 'chat',
						text: '',
						color: "#262728"
					}, {
						icon: 'cart',
						text: '',
						color: "#262728",
						info: this.cartnum
					}];
				}
			
				
				

				text = 'В корзину';
			} else {
				this.options = [{
					icon: scIcon,
					text: '',
					color: scColor
				}, {
					icon: 'shop',
					text: '',
					color: "#262728"
				}, {
					icon: 'chat',
					text: '',
					color: "#262728"
				}, {
					icon: 'cart',
					text: '',
					color: "#262728",
					info: this.cartnum
				}]
				text = this.$t('加入购物车');
			}

			let rightText = "";
			// 已售没逻辑 所有的商品规格都没库存才有一手亲
			// 判断
			let ggList = this.gglist
			let isSellEmpty = ggList.every((ele) => {
				return ele.stock == 0
			})
			// 有库存判断一下第一个库存不为空的为选中的项目
			// 当前有库存的规格
			let currentStockInfo = {}; // 当前有库存的
			let currentStockIndex = 0;
			if (!isSellEmpty) {
				rightText = this.$t(`立即购买`);
				currentStockInfo = ggList.find((ele, index) => {
					if (ele.stock != 0) {
						currentStockIndex = index;
					}
					return ele.stock != 0;
				})
			} else {
				rightText = `${this.$t("已售罄")}`;
			}


			this.currentPrice = currentStockInfo;
			this.currentInitCarinfo = currentStockInfo
			this.skuActive = this.gglist[currentStockIndex].id;
			this.skuShow = currentStockIndex;
			// 加入购物车
			this.skuNum = this.product.limit_start;

			this.ispifaNum = this.currentPrice.qpsl;
			this.ispifa = (this.skuNum >= this.ispifaNum && this.ispifaNum > 0) ? 1 : 0; // 批发价格
			this.activePrice = this.ispifa == 1 ? this.currentPrice.pf_price : this.currentPrice.sell_price;

			this.skuPrice = (this.activePrice * this.skuNum).toFixed(2);




			this.buttonGroup = [{
					text: text,
					backgroundColor: '#0097FF',
					color: '#fff'
				},
				{
					text: rightText,
					backgroundColor: '#FF6A00',
					color: '#fff'
				}
			];

			if (this.lang == 'ru') {
				if (this.sample == 1) {
					this.buttonGroup.unshift({
						text: this.$t('样品免费申请'),
						backgroundColor: '#03C24F',
						color: '#fff'
					})
				}
			
			}
		},
		getVideoTop() {
			return {
				top: `calc(${+this.statusBarHeight}px + 44px + 200rpx)`
			}
		},
		errorDefaul() {
			this.business.logo = '/static/default.png'
		},
		jjFullscreenChange(e) {
			this.jjVideoCtx.play();
		},
		async getUpdate() {
			if (!this.id) {
				return;
			}
			try {
				const {
					data
				} = await this.$u.api.shopping.getProduct({
					id: this.id,
					offer_price: this.offer_price,
					offerId: this.offerId,
				});

				scIcon = data.isfavorite ? "heart-filled" : "heart";
				scColor = data.isfavorite ? "#f00" : "#262728";

				this.fa_buscount = data.fa_procount || 0;
				this.cartnum = data.cartnum;
				if (this.lang == 'zh') {
					this.options[3].info = data.cartnum;
				} else {
					if (this.sample == 1) {
						this.options[1].info = data.cartnum;
					} else {
						this.options[3].info = data.cartnum;
					}
				}
				this.options[0].icon = scIcon
				this.options[0].color = scColor

			} catch (e) {
				console.log(e)
			}
		},
		// 浏览记录列表
		async getHistoryData() {
			try {
				const {
					data
				} = await this.$u.api.shopping.getMemberHistory({
					id: this.id,
					type: "shop",
				});
				this.historyNum = data.member_history_count || 0;
				if (!!data.member_history?.length) {
					let arr = [];
					let avatarList = [];
					data.member_history.map((item, index) => {
						let str = item[this.plang('username')] + this.$t("正在查看");
						arr.push(str)
						if (index < 3) {
							avatarList.push(item.avatar);
						}
					})
					this.historyList = [...arr];
					this.avatarList = [...avatarList];
				}
				// setTimeout(() => {
				// 	this.getHistoryData();
				// }, 30000)
			} catch (e) { }
		},
		getVipImg(val) {
			switch (val) {
				case 0:
					return vipImg1;
				case 1:
					return vipImg2;
				case 2:
					return vipImg3;
				case 3:
					return vipImg4;
				default:
					break;
			}
		},
		closeJJ() {
			this.closeVideo = false;
		},


		// 返回
		goback() {
			uni.navigateBack()
		},

		// 视频中间播放按钮
		plays(video) {
			// 判断安卓
			const systemInfo = uni.getSystemInfoSync();
			// 判断是否为 Android 系统
			if (systemInfo.platform === 'android') {
				this.playVideo = video;
				this.$refs.popupVideo.open()
				return;
			}
			this.$nextTick(() => {
				this.jjVideoCtx.play();
				this.jjVideoCtx.requestFullScreen();
			})

		},
		// 播放头部视频
		playsHeader(video) {
			// 判断安卓
			const systemInfo = uni.getSystemInfoSync();
			// 判断是否为 Android 系统
			if (systemInfo.platform === 'android') {
				this.playVideo = video;
				this.$refs.popupVideo.open()
				return;
			}
			this.videos.requestFullScreen();
			this.$nextTick(() => {
				this.videos.play();
			})


		},
		// 监听视频停止播放
		endVideo() {
			this.isShow = true;
			this.stopTouchMove = false;
		},
		// 停止播放
		stopVideo() {
			this.videos.pause();
			this.isShow = true;
			this.stopTouchMove = false;
			this.$refs.videoPopup.close();
		},
		// 视频错误回调
		videoErrorCallback: function (e) {
			uni.showModal({
				confirmText: this.$t("确定"),
        cancelText: this.$t("取消"),
				content: e.target.errMsg,
				showCancel: false
			})
		},
		// 左侧按钮监听
		shopLeftClick(e) {
			// 取消收藏 & 收藏
			if (e.content.icon === "heart" || e.content.icon === "heart-filled") {
				if (isLogin()) {
					this.addfavorite();
				}
				return;
			}
			// 店铺
			if (e.content.icon === "shop") {
				uni.navigateTo({
					url: '/pages/details/merchantDetail?bid=' + this.business.id,
				})
				return;
			}
			// 随心问
			if (e.content.icon === "chat") {
				if (isLogin()) {
				
					this.isMessageGo({
						action: 'initiateChat',
						data: this.business.mid,
					})

				}

				return;
			}
			// 购物车
			if (e.content.icon === "cart") {
				if (isLogin()) {
					uni.navigateTo({
						url: '/pages/cart/index?bid=' + this.business.id + '&title=' + encodeURIComponent(this.business[this.plang('name')] || ''),
					})
				}

				return;
			}
		},
		// 右侧按钮监听
		async shopRightClick(e) {
			this.isSellEd();
	
			if (this.lang == 'ru') {
				if (e.index === 0) {
			
					this.isMessageGo({
						action: 'sendGood', // 发送商品消息
						data: {
							url: `${HTTP_SHOPPING_URL}/ts/#/pages/details/shopDetail?id=${this.id}&type=1`, // string 商品链接
							title: this.product.name || '', // 名称 string
							title_ru: this.product.name_ru || '', // 名称 俄string
							currency: this.product.currency || '¥', // 货币单位 string
							price: this.getPriceStringSuggest(), // 价格 string
							suggestion: this.getPriceString(), // 建议价格 string
							good_id: this.product.id, // 商品id number
							pic: this.product.pic, // 主图 string
							userId: this.business.mid, // 对方用户id number
							is_yf: this.product.is_yf,
						}

					})
					return;
				}
				if (e.index === 1) {
					this.rightBtnType = 0;
					this.$refs.skuPopup.open();
					return;
				}
				// 立即购买
				if (e.index === 2) {
					this.rightBtnType = 1;
					this.$refs.skuPopup.open();
					return;
				}
			} else {
				
				if (e.index === 0) {
					this.rightBtnType = 0;
					this.$refs.skuPopup.open();
					return;
				}
				// 立即购买
				if (e.index === 1) {
					this.rightBtnType = 1;
					this.$refs.skuPopup.open();
					return;
				}
			}
		
		},
		async addfavorite() {
			try {
				const res = await this.$u.api.shopping.addfavorite({
					proid: this.id,
					bid: this.business.id,
					is_guanzhu: 0,
					type: "shop",
				});
				if (res.msg === "已取消") {
					this.options[0].icon = "heart";
					this.options[0].color = "#262728";
					scIcon = "heart"
					scColor = "#262728";
				}
				if (res.msg === "已收藏") {
					this.options[0].icon = "heart-filled";
					this.options[0].color = "#f00";
					scIcon = "heart-filled"
					scColor = "#f00";
				}
				uni.showToast({
					title: res[this.plang('msg')],
					icon: 'none',
					duration: 2000
				});
				this.fa_buscount = res.data || 0;
			} catch (e) { }
		},
		// 展开
		seeMore() {
			this.isEllipsis = false;
		},
		// 图片放大
		amplifyImg(imgUrl) {
			if (!imgUrl) return;
			this.commonImg = imgUrl;
			this.$refs.popup.open();
		},
		// 关闭图片弹窗
		closePop() {
			this.$refs.popup.close();
		},
		// 切换 tab
		changeTab(val) {
			if (!val) return;
			this.tab = val;
		},
		// 选择子商品
		sclectSku(item, num, stock) {

			if (stock == 0) {
				uni.showToast({
					title: this.$t("已售罄"),
					icon: 'none',
					duration: 2000
				});
				return;
			}
			this.skuNum = this.product.limit_start || 1
			this.ispifaNum = item.qpsl;
			this.skuActive = item.id;
			console.log(this.skuActive, 'this.skuActivethis.skuActive')
			this.ispifa = (this.skuNum >= this.ispifaNum) ? 1 : 0; // 批发价格

			this.activePrice = this.ispifa == 1 ? item.pf_price : item.sell_price;
			this.skuPrice = (this.activePrice * this.skuNum).toFixed(2);
			this.skuShow = num;
			this.currentPrice = item;
			let obj = this.gglist[num];
			// jj视频
			this.selfVideo = obj.jj_video || this.product.video;
			this.product.video = obj.video || this.product.video;
			this.currntMainPic = obj[this.plang('pic')];
			this.closeVideo = true;

			if (!!obj?.sd_pic && !!obj.sd_pic) {
				this.vrImglists = obj.sd_pic.split(",");
				this.current3D = obj['3D']
			}
		},
		skuMumChange(value) {
			this.ispifa = value >= this.ispifaNum ? 1 : 0; // 批发价格
			this.activePrice = this.ispifa == 1 ? this.currentPrice.pf_price : this.currentPrice.sell_price;
			this.skuPrice = (this.activePrice * value).toFixed(2);
		},
		// 提交
		async submit() {
			if (isLogin()) {
				switch (this.rightBtnType) {
					case 0:
						try {
							const res = await this.$u.api.shopping.addShopCart({
								ggid: this.skuActive,
								num: this.skuNum,
								proid: this.product.id
							});
							uni.showToast({
								title: res[this.plang('msg')],
								icon: 'none',
								duration: 2000
							});
							if (this.lang == 'zh') {
								this.options[3].info = res.data || 0;
							} else {
								if (this.sample == 1) {
									this.options[1].info = res.data || 0;
								} else {
									this.options[3].info = res.data || 0;
								}
							}
							this.$refs.skuPopup.close();
						} catch (e) {

						}
						break;
					case 1:
						this.$refs.skuPopup.close();
						// this.showPayPop = true;
						this.onConfirm();
						break;
					default:
						break;
				}
			}

		},
		// 评价切换
		changeEva(val) {
			this.pagenum = 1;
			this.isRefresher = false;
			this.evaluateType = val;
			this.getCommentlist(val);
		},
		async onConfirm() {
			let info = {
				prodata: `${this.id},${this.skuActive},${this.skuNum},0`,
				df_id: this.plateformLists[this.currentId].id || 1,
				bid: this.business.id,
			}

			try {
				const res = await this.$u.api.shopping.confimrOrder(info);
				if (res.code == 1 || res.code == 200) {
					uni.navigateTo({
						url: "/pages/confirmOrder/index?info=" + encodeURIComponent(JSON.stringify(info)),
					});
					this.showPayPop = false;
					this.currentId = 0;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					})
				}

			} catch (error) {
				console.log(error, '错误错误')
			}



		},
		// 代收付平台列表
		async goSettled() {
			try {
				const {
					data
				} = await this.$u.api.shopping.dfgsCompany();
				this.plateformLists = data; // 代收付平台
			} catch (error) {
				console.log(error)
			}
		},
		// 代付公司
		onClickDaifu(index) {
			this.currentId = index;
		},
		// 获取评价列表
		async getCommentlist(level) {
			if (this.isRefresher || this.loading) return;
			this.loading = true;
			let params = {
				proid: this.id,
				pagenum: this.pagenum,
				pj_level: level,
			}
			try {
				let {
					data: { datalist }
				} = await this.$u.api.shopping.getCommentlist(params);
				if (!datalist || datalist.length < 20) this.isRefresher = true;
				if (this.pagenum === 1) {
					this.commentlist = datalist;
				} else {
					this.commentlist.push(...datalist);
				}
				this.loading = false;
			} catch (error) {
				console.log(error)
				this.isRefresher = true;
				this.loading = false;
			}
		},
		// 触底加载
		lower() {
			if (this.isRefresher || this.loading) return;
			this.pagenum++;
			this.getCommentlist(this.evaluateType);
		},
		// 举报内容变化
		inputReport(e) {
			this.reportNum = e.length;
		},
		// 举报提交
		async submitReport() {
			let params = {
				proid: this.id,
				bid: this.business.id,
				content: this.reportText
			}
			try {
				let res = await this.$u.api.shopping.getProTs(params);
				this.isReport = false;
				this.reportShow = false;
			} catch (error) {
				console.log(error)
				this.isReport = false;
				this.reportShow = false;
			}
		},
		closeReport() {
			this.reportShow = false;
			this.isReport = false;
		},
		// 分享
		shareBtn() {
			this.isShare = true;
		},
		// 关闭分享
		closeShare() {
			this.isShare = false;
		},
		copyHtml() {
			// type 1 商品详情 2 1688详情 3 店铺详情
			uni.setClipboardData({
				data: `${HTTP_SHOPPING_URL}/ts/#/pages/jump/index?bid=${this.id}&type=2`, //要被复制的内容
				success: () => {
					uni.showToast({
						title: this.$t("复制成功")
					})
					this.isShare = false;
				}
			});
		},
	}
}
</script>

<style scoped lang="less">
@import "./shopDetail.less";
</style>